<template>
    <div class="bg">
        <XHeader
            :left-options="{backText:''}"
        >登录
           <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
        </XHeader>
         <div class="info">
            <label class="fa fa-user-o"></label>
            <input type="text" placeholder="请输入用户名" v-model="name" pattern="^[0-9a-zA-Z\u4e00-\u9fa5]{3,12}$">
            <hr>
            <label class="fa fa-lock"></label>
            <input type="password" placeholder="请输入密码" v-model="psw" pattern="^[0-9a-zA-Z]{6,12}$">
            <hr>
        </div>
        <button :disabled="name&&!psw" class="butt" @touchstart="dian">登&emsp;录</button>
        <div class="last">
            <router-link to="/regist" style="color: #55bec1;">注册帐号</router-link>
            <router-link to="" style="color: #55bec1;">忘记密码</router-link>
        </div>
        <div class="dl">
            <div class="linee"></div>
            <p>快捷登录</p>
            <div class="last">
                <span class="fa fa-qq dd" style="background-color:#3498DB;"></span>
                <span class="fa fa-weixin dd" style="background-color:#2ECC71;"></span>
                <span class="fa fa-weibo dd" style="background-color:#E74C3C;"></span>
                <span class="fa fa-edge dd" style="background-color:#54B3D8"></span>
            </div>
        </div>

        <!--<div style="background-color:#2ECC71">
            1<input type="text" v-model="name1"><br>
            2<input type="text" v-model="id"><br>
            7<input type="text" v-model="introduction"><br>
            <button @click="ssss">提交</button>
        </div>-->

    </div>
</template>

<script>
    import { XHeader } from 'vux'
    export default{
        data:function(){
            return {
                name:null,
                psw:null,
                // name1:null,
                // id:null,
                // introduction:null,
                
            }
        },
        components:{
            XHeader
        },
        methods:{
            dian:function(){
                this.http.post("/api/users/login",{
                    name:this.name,
                    psw:this.psw
                }).then(res=>{
                    if(!res.data.err){
                        this.$store.commit("setIsLogin",res.data.data);
                    }
                    this.$vux.alert.show({
                        title:res.data.msg,
                        onHide(){
                            if(!res.data.err){
                                location.href = "/#/"
                            }
                        }
                    })
                })
            },
            // ssss:function(){
            //     var a =this.id.split(",");
            //     var s = {
            //         name:this.name1,
            //         id:a,
            //         introduction:this.introduction,
            //         avatar:1
            //     }
            //     // 一朝穿越遇见等爱的你
            //     // 导读：千年等一回，太长，穿越过把瘾，正好，做一回名门淑女，任他君子好逑。
            //     // 59fad8bb633f6a10f07def00,59fc1dce633f6a1964a390ce,59fc1db7633f6a1964a390c8,59fadb0d633f6a10f07def08,59fadb15633f6a10f07def0e,59fadb19633f6a10f07def12
            //     this.http.post("/api/addbou",s).then(res=>{
            //         if(!res.data.err){
            //             this.$vux.alert.show({
            //                 title:res.data.msg
            //             })
            //         }
            //     })
            // }
        }
    }
</script>

<style scoped>
    XHeader{
        position: relative;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
    }
    .info{
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
    }
    hr{
        color: #55bec1;
    }
    input{
        width: 85%;
        background-color: #eeeeee;
        height: 40px;
        font-size: 18px;
        border: none;
        color: #55bec1;
    }
    label{
        width: 10%;
        font-size: 26px;
    }
    .butt{
        background-color: #55BEC1;
        color: white;
        width: 90%;
        border: none;
        height: 40px;
        font-size: 20px;
        border-radius: 5px;
    }
    .butt:disabled{
        background-color: #aaa;
    }
    .last{
        display: flex;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .dl{
        width: 80%;
        margin: 0 auto;
        margin-top: 50px;
    }
    .linee{
        margin: 0;
        border-bottom: solid 1px #999;
    }
    p{
        background-color: #eeeeee;;
        width: 96px;
        position: relative;
        padding: 0px 16px;
        top: -12px;
        margin: 0 auto;
    }
    .dd{
        font-size:20px;
        color:white;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50%;
    }
    
</style>